<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>redis list 命令案例-队列</title>
    <link rel="stylesheet" type="text/css" href="https://cdn.bootcss.com/iview/2.14.0/styles/iview.css">
    <link rel="stylesheet" type="text/css" href="css/index.css">
</head>
<body>
<div id="app">
    <div class="layout">
        <layout>
            <i-header>
                <i-menu mode="horizontal" theme="dark" active-name="1" >
                    <div class="layout-nav">
                    </div>
                </i-menu>
            </i-header>
            <i-content :style="{padding: '10px 50px'}">
                <row>
                    <i-col>
                    <card>
                        <row style="margin-bottom: 2px">
                            <i-col span="9">
                                <card dis-hover  style="margin: 10px 5px;    height: 600px;overflow-y: scroll;" >
                                    <p slot="title">
                                        <Icon type="ios-list-outline"></Icon>
                                        队列数据-共{{listDataSize}}条
                                    </p>
                                    <card dis-hover v-for="item in listData" style="margin: 32px 0">
                                        {{ item }}
                                    </card>
                                </card>
                            </i-col>
                            <i-col span="6">
                                <card dis-hover  style="margin: 10px 5px">
                                    <p slot="title">
                                        <Icon type="ios-list-outline"></Icon>
                                        队列插入操作
                                    </p>
                                    <i-button @click="openLeftPushModel" type="ghost" icon="plus-circled">头部插入</i-button>
                                    <i-button @click="openRightPushModel" type="ghost" icon="plus-circled">尾部插入</i-button>
                                </card>
                                <card dis-hover  style="margin: 10px 5px">
                                    <p slot="title">
                                        <Icon type="ios-list-outline"></Icon>
                                        队列弹出操作
                                    </p>
                                    <i-button @click="leftPop" type="ghost" icon="trash-a">头部弹出</i-button>
                                    <i-button @click="rightPop" type="ghost" icon="trash-a">尾部弹出</i-button>
                                </card>
                            </i-col>

                            <i-col span="9">
                                <card dis-hover  style="margin: 10px 5px;    height: 600px;overflow-y: scroll;" >
                                    <p slot="title">
                                        <Icon type="ios-list-outline"></Icon>
                                        弹出的数据
                                    </p>
                                    <card dis-hover v-for="item in popListData" style="margin: 32px 0">
                                        {{ item }}
                                    </card>
                                </card>
                            </i-col>


                        </row>
                    </card>
                    </i-col>
                </row>
            </i-content>
        </layout>
    </div>

    <Modal :title="title" v-model="modalVisible" :mask-closable='false' :width="500" :styles="{top: '30px'}">
        <i-form ref="form" :model="form" :label-width="70" :rules="formValidate">
            <form-item label="data" prop="data">
                <i-input v-model="form.data"/>
            </form-item>
        </i-form>
        <div slot="footer">
            <i-button type="text" @click="cancel">取消</i-button>
            <i-button type="primary" :loading="submitLoading" @click="submit">提交</i-button>
        </div>
    </Modal>
</div>
</body>
</html>

<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
<script type="text/javascript" src="https://cdn.bootcss.com/iview/2.14.0/iview.js"></script>
<script src="https://cdn.bootcss.com/axios/0.18.0/axios.js"></script>

<script type="text/javascript" src="js/index.js"></script>